<?php
/**
 * WooCommerce My Account Dashboard Template
 * 用户中心主页面模板，基于HTML模板 profile.html
 * 
 * @package WP Bootstrap Woo
 */

defined('ABSPATH') || exit;

get_header(); ?>

<!-- breadcrumb start -->
<section class="breadcrumb-area">
    <div class="container">
        <div class="col">
            <div class="row">
                <div class="breadcrumb-index">
                    <?php woocommerce_breadcrumb(); ?>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- breadcrumb end -->

<!-- my account start -->
<section class="my-account">
    <div class="container">
        <div class="my-account-area">
            <div class="row">
                
                <!-- account sidebar -->
                <div class="col-12 col-lg-3 col-md-4">
                    <div class="account-sidebar">
                        <div class="account-user-info">
                            <div class="user-avatar">
                                <?php 
                                $user = wp_get_current_user();
                                echo get_avatar($user->ID, 80); 
                                ?>
                            </div>
                            <div class="user-details">
                                <h5><?php echo esc_html($user->display_name); ?></h5>
                                <p><?php echo esc_html($user->user_email); ?></p>
                            </div>
                        </div>
                        
                        <div class="account-navigation">
                            <?php
                            /**
                             * My Account navigation.
                             */
                            do_action('woocommerce_account_navigation');
                            ?>
                        </div>
                    </div>
                </div>
                
                <!-- account content -->
                <div class="col-12 col-lg-9 col-md-8">
                    <div class="account-content">
                        
                        <!-- welcome message -->
                        <div class="account-welcome">
                            <h3>Dashboard</h3>
                            <p>Welcome back, <?php echo esc_html($user->display_name); ?>! From your account dashboard you can view your recent orders, manage your shipping and billing addresses, and edit your password and account details.</p>
                        </div>
                        
                        <!-- quick stats -->
                        <div class="account-stats">
                            <div class="row">
                                <div class="col-12 col-md-3 col-sm-6">
                                    <div class="stat-card">
                                        <div class="stat-icon">
                                            <i class="feather-shopping-bag"></i>
                                        </div>
                                        <div class="stat-content">
                                            <h4><?php echo esc_html(wc_get_customer_order_count($user->ID)); ?></h4>
                                            <p>Total Orders</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 col-md-3 col-sm-6">
                                    <div class="stat-card">
                                        <div class="stat-icon">
                                            <i class="feather-clock"></i>
                                        </div>
                                        <div class="stat-content">
                                            <?php
                                            $pending_orders = wc_get_orders(array(
                                                'customer' => $user->ID,
                                                'status' => array('processing', 'on-hold'),
                                                'limit' => -1
                                            ));
                                            ?>
                                            <h4><?php echo count($pending_orders); ?></h4>
                                            <p>Pending Orders</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 col-md-3 col-sm-6">
                                    <div class="stat-card">
                                        <div class="stat-icon">
                                            <i class="feather-heart"></i>
                                        </div>
                                        <div class="stat-content">
                                            <h4>0</h4>
                                            <p>Wishlist Items</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 col-md-3 col-sm-6">
                                    <div class="stat-card">
                                        <div class="stat-icon">
                                            <i class="feather-map-pin"></i>
                                        </div>
                                        <div class="stat-content">
                                            <?php
                                            $addresses = 0;
                                            if (get_user_meta($user->ID, 'billing_address_1', true)) $addresses++;
                                            if (get_user_meta($user->ID, 'shipping_address_1', true)) $addresses++;
                                            ?>
                                            <h4><?php echo $addresses; ?></h4>
                                            <p>Saved Addresses</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- recent orders -->
                        <div class="account-recent-orders">
                            <div class="section-header">
                                <h4>Recent Orders</h4>
                                <a href="<?php echo esc_url(wc_get_account_endpoint_url('orders')); ?>" class="view-all">View All</a>
                            </div>
                            
                            <div class="orders-table">
                                <?php
                                $recent_orders = wc_get_orders(array(
                                    'customer' => $user->ID,
                                    'limit' => 5,
                                    'orderby' => 'date',
                                    'order' => 'DESC'
                                ));
                                
                                if (!empty($recent_orders)) : ?>
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                <th>Order</th>
                                                <th>Date</th>
                                                <th>Status</th>
                                                <th>Total</th>
                                                <th>Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <?php foreach ($recent_orders as $order) : ?>
                                                <tr>
                                                    <td>
                                                        <a href="<?php echo esc_url($order->get_view_order_url()); ?>" class="order-number">
                                                            #<?php echo $order->get_order_number(); ?>
                                                        </a>
                                                    </td>
                                                    <td><?php echo wc_format_datetime($order->get_date_created()); ?></td>
                                                    <td>
                                                        <span class="order-status status-<?php echo esc_attr($order->get_status()); ?>">
                                                            <?php echo esc_html(wc_get_order_status_name($order->get_status())); ?>
                                                        </span>
                                                    </td>
                                                    <td><?php echo $order->get_formatted_order_total(); ?></td>
                                                    <td>
                                                        <a href="<?php echo esc_url($order->get_view_order_url()); ?>" class="btn-view">View</a>
                                                    </td>
                                                </tr>
                                            <?php endforeach; ?>
                                        </tbody>
                                    </table>
                                <?php else : ?>
                                    <div class="no-orders">
                                        <div class="no-orders-content">
                                            <i class="feather-shopping-bag"></i>
                                            <h5>No orders yet</h5>
                                            <p>You haven't placed any orders yet.</p>
                                            <a href="<?php echo wc_get_page_permalink('shop'); ?>" class="btn-style1">Start Shopping</a>
                                        </div>
                                    </div>
                                <?php endif; ?>
                            </div>
                        </div>
                        
                        <!-- account actions -->
                        <div class="account-actions">
                            <div class="row">
                                <div class="col-12 col-md-6">
                                    <div class="action-card">
                                        <div class="action-icon">
                                            <i class="feather-user"></i>
                                        </div>
                                        <div class="action-content">
                                            <h5>Account Details</h5>
                                            <p>Update your personal information and password</p>
                                            <a href="<?php echo esc_url(wc_get_account_endpoint_url('edit-account')); ?>" class="btn-action">Edit Details</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 col-md-6">
                                    <div class="action-card">
                                        <div class="action-icon">
                                            <i class="feather-map-pin"></i>
                                        </div>
                                        <div class="action-content">
                                            <h5>Addresses</h5>
                                            <p>Manage your billing and shipping addresses</p>
                                            <a href="<?php echo esc_url(wc_get_account_endpoint_url('edit-address')); ?>" class="btn-action">Manage Addresses</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- my account end -->

<style>
.my-account-area {
    margin: 40px 0;
}

.account-sidebar {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px;
}

.account-user-info {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #dee2e6;
}

.user-avatar img {
    border-radius: 50%;
    width: 80px;
    height: 80px;
    margin-bottom: 15px;
}

.user-details h5 {
    margin: 0 0 5px 0;
    font-weight: 600;
}

.user-details p {
    margin: 0;
    color: #6c757d;
    font-size: 14px;
}

.account-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.account-navigation li {
    margin-bottom: 5px;
}

.account-navigation a {
    display: block;
    padding: 12px 15px;
    color: #495057;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.account-navigation a:hover,
.account-navigation a.is-active {
    background: #007cba;
    color: #fff;
}

.account-content {
    padding-left: 30px;
}

.account-welcome {
    margin-bottom: 30px;
}

.account-welcome h3 {
    margin-bottom: 10px;
    color: #212529;
}

.account-stats {
    margin-bottom: 40px;
}

.stat-card {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
    transition: transform 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.stat-icon {
    font-size: 24px;
    color: #007cba;
    margin-bottom: 15px;
}

.stat-content h4 {
    margin: 0 0 5px 0;
    font-size: 24px;
    font-weight: 700;
    color: #212529;
}

.stat-content p {
    margin: 0;
    color: #6c757d;
    font-size: 14px;
}

.account-recent-orders {
    margin-bottom: 40px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.section-header h4 {
    margin: 0;
    color: #212529;
}

.view-all {
    color: #007cba;
    text-decoration: none;
    font-weight: 500;
}

.orders-table table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.orders-table th,
.orders-table td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid #dee2e6;
}

.orders-table th {
    background: #f8f9fa;
    font-weight: 600;
    color: #495057;
}

.order-status {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
}

.status-completed { background: #d4edda; color: #155724; }
.status-processing { background: #fff3cd; color: #856404; }
.status-pending { background: #f8d7da; color: #721c24; }
.status-on-hold { background: #d1ecf1; color: #0c5460; }

.btn-view {
    color: #007cba;
    text-decoration: none;
    font-weight: 500;
    padding: 6px 12px;
    border: 1px solid #007cba;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.btn-view:hover {
    background: #007cba;
    color: #fff;
}

.no-orders {
    text-align: center;
    padding: 60px 20px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

.no-orders-content i {
    font-size: 48px;
    color: #6c757d;
    margin-bottom: 20px;
}

.no-orders-content h5 {
    margin-bottom: 10px;
    color: #495057;
}

.no-orders-content p {
    color: #6c757d;
    margin-bottom: 20px;
}

.action-card {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 20px;
    transition: transform 0.3s ease;
}

.action-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.action-icon {
    font-size: 32px;
    color: #007cba;
    margin-bottom: 15px;
}

.action-content h5 {
    margin-bottom: 10px;
    color: #212529;
}

.action-content p {
    color: #6c757d;
    margin-bottom: 20px;
    font-size: 14px;
}

.btn-action {
    background: #007cba;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 500;
    transition: background 0.3s ease;
}

.btn-action:hover {
    background: #005a8b;
    color: #fff;
}

@media (max-width: 768px) {
    .account-content {
        padding-left: 0;
    }
    
    .section-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .section-header h4 {
        margin-bottom: 10px;
    }
    
    .orders-table {
        overflow-x: auto;
    }
}
</style>

<?php get_footer(); ?>